<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('总览统计')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form>
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>选择年份：</label>
                            </li>
                            <li>
                                <input type="text" id="year" onchange="change()" th:value="${#dates.format(new java.util.Date(), 'yyyy')}"/>
                            </li>
                            <li>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="location.reload()"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 search-collapse">
                <label><h3>销售总额：</h3></label>
                <label><h3 id="totalMoney"></h3></label>
            </div>
            <div class="col-sm-12 search-collapse">
                <label></label>
                <div class="echarts" id="monthReport" style="height: 400px"></div>
            </div>
            <div class="col-sm-12 search-collapse">
                <label></label>
                <div class="echarts" id="typeReport" style="height: 800px"></div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">

        $("#year").datetimepicker({
            format: "yyyy",
            startView: 4,
            minView: 4,
            autoclose: true
        });

        $(function () {
            change();
        })

        function change(){
            $.ajax({
                type: "post",
                url: ctx + "totalReport/report/typeMonth",
                data: {
                    "year": $("#year").val()
                },
                success: function (result) {
                    if (result.code == 0) {
                        $("#monthReport").removeAttr("_echarts_instance_");
                        $("#typeReport").removeAttr("_echarts_instance_");
                        if (result.data.monthData.length > 0) {
                            monthOption(result.data.monthData.names, result.data.monthData.moneys, "monthReport");
                            typeOption(result.data.typeData, "typeReport");
                            $('#totalMoney').text(result.data.monthData.money);
                        } else {
                            var noneData = "<h1>暂无数据</h1>";
                            $('#monthReport').html(noneData);
                            $('#typeReport').html(noneData);
                            $('#totalMoney').text("暂无数据");
                        }
                    }
                }
            })
        }

        function monthOption(namesData, moneyData, divId) {
            var option = {
                title: {
                    text: '月份销售统计',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '4%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: namesData
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.1]
                },
                series: [
                    {
                        type: 'bar',
                        data: moneyData,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 20
                                    }
                                }
                            }
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ],
                            itemStyle: {
                                color: '#145096'
                            },
                            label: {
                                color: '#145096',
                                fontSize: 20
                            }
                        }
                    }
                ]
            };
            var barChart = echarts.init(document.getElementById(divId));
            barChart.setOption(option, true);
        }

        function typeOption(typeData, divId) {
            var option = {
                title: {
                    text: '商品分类销售统计',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        fontSize: 25
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: [80, 230],
                        data: typeData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            length: 50,
                            length2: 30
                        },
                        label: {
                            formatter: '{b}\n￥{c}',
                            lineHeight: 30,
                            fontSize: 20,
                            rich: {
                                time: {
                                    fontSize: 30,
                                    color: '#000'
                                }
                            }
                        }
                    }
                ]
            };
            var barChart = echarts.init(document.getElementById(divId));
            barChart.setOption(option, true);
        }
    </script>
</body>
</html>